<template>
  <div class="template-wrap">
    <menu-top></menu-top>
    <div class="content">
      <div class="content-wrap">
        <div>
          <menu-left ref="left" :href="href"></menu-left>
        </div>
        <el-col>
          <div class="certification-wrap right-content">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/companyEdit' }">我的公司</el-breadcrumb-item>
              <el-breadcrumb-item>初审认证</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="wrap">
              <rotate-message></rotate-message>
              <div class="wrap-container">
                <div  v-if="stateStep == 3" class="title">公司状态：<span>初审通过</span>
                    <div @click="refBtn" class="btn">重新发起初审认证</div>
                </div>
                <div  v-if="stateStep != 3" class="title">公司状态：<span v-show="stateStep == 1">审核通过，待初审认证</span><span v-show="stateStep == 2">初审认证中</span><span v-show="stateStep == 4">初审未通过</span>
                </div>
                <div class="info-edit"  v-if="stateStep == 3">
                    <div class="edit-title">感谢您对‘{{configObj.name}}’的支持，您的贷款初审已经通过。根据您的初审情况，我们为您提供如下贷款产品：</div>
                    <div class="product-wrap">
                        <div class="product-list" @click="linkTo('/productDetail',item.id)" v-for="(item,index) in dataList" :key="index">
                           <img :src="item.photoFiles.length?item.photoFiles[0].fileUrl:''" alt="">
                            <div class="list-info">
                                <div class="title over-hidden">{{item.productName}}</div>
                                <div class="date">{{item.gmtCreated}}</div>
                                <div class="list-line over-hidden">
                                    <div class="line-item"><span>贷款额度：</span>{{item.loanFundMin+' 万元'+' ~ '+item.loanFundMax+' 万元'}}</div>
                                    <div class="line-item"><span>贷款最高期限：</span>{{item.investYearDesc}}</div>
                                    <div class="line-item"><span>贷款年化利率：</span>{{item.minReportRate}}</div>
                                    <div class="line-item"><span>资金主体：</span>{{returnBody(item.fundBodyDatas)}}</div>
                                </div>
                                <div class="list-line">
                                    <div class="line-item"><span>贷款适用地区：</span>{{returnArrName(item.areaDatas)}}</div>
                                    <div class="line-item"><span>申请者最低成立年限：</span>{{item.applyMixYear + '年'}}</div>
                                    <div class="line-item"><span>申请者盈利要求：</span>{{item.applyProfit == 'y'?'需盈利':'无要求'}}</div>
                                    <div class="line-item"><span>申请者最低营业收入要求：</span>{{item.applyMixIncome}}</div>
                                </div>
                                <div :class="item.hadApply  == 'y'?'applyed':''"  @click="linkTo('/productDetail',item.id)" class="btn">{{item.hadApply  == 'y'?'已申请':'申请'}}</div>
                            </div>
                        </div>
                    </div>              
                </div>
                <div class="info-form"  v-if="stateStep == 1">
                    <div class="edit-title">为了更好地帮您匹配适合您的贷款产品，请根据企业的情况如实填写如下问题的答案。</div>
                    <el-form :model="information" :rules="rules" ref="information" >
                        <el-form-item prop="companyServiceInfo">
                            <div class="form-list">
                                <div class="form-title">1、公司所从事的业务(产品和服务）</div>
                                <div class="form-value">
                                    <el-input v-model="information.companyServiceInfo" placeholder="请输入内容"></el-input>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="lastYearIncome">
                            <div class="form-list">
                                <div class="form-title">2、上一完整年度的营业收入（单位：万元）</div>
                                <div class="form-value">
                                    <el-input v-model.number="information.lastYearIncome" placeholder="请输入内容"></el-input>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="isLastYearProfit">
                            <div class="form-list">
                                <div class="form-title">3、上一完整年度是否盈利？</div>
                                <div class="form-value">
                                    <el-radio-group v-model="information.isLastYearProfit">
                                        <el-radio label="是">是</el-radio>
                                        <el-radio label="否">否</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="thisYearPlanIncome">
                            <div class="form-list">
                                <div class="form-title">4、今年完整年度预计营业收入（单位：万元）</div>
                                <div class="form-value">
                                    <el-input v-model.number="information.thisYearPlanIncome" placeholder="请输入内容"></el-input>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="masterCityCode">
                            <div class="form-list">
                                <div class="form-title">5、公司的实际控制人户籍所在地？</div>
                                <div class="form-value">
                                   <el-select v-model="information.masterProvinceCode"  @change="provinceChange1" clearable placeholder="请选择">
                                        <el-option
                                        v-for="item in addressArr"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="information.masterCityCode" @change="dd" clearable placeholder="请选择">
                                        <el-option
                                        v-for="item in cityArr"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key">
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="isThisYearPlanProfit">
                            <div class="form-list">
                                <div class="form-title">6、今年完整年度预计是否盈利？</div>
                                <div class="form-value">
                                    <el-radio-group v-model="information.isThisYearPlanProfit">
                                        <el-radio label="是">是</el-radio>
                                        <el-radio label="否">否</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="isHasBankCash">
                            <div class="form-list">
                                <div class="form-title">7、目前是否有银行贷款？</div>
                                <div class="form-value">
                                    <el-radio-group v-model="information.isHasBankCash">
                                        <el-radio label="是">是</el-radio>
                                        <el-radio label="否">否</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="isHadFinancing">
                            <div class="form-list">
                                <div class="form-title">8、是否曾经进行过股权融资？</div>
                                <div class="form-value">
                                    <el-radio-group v-model="information.isHadFinancing">
                                        <el-radio label="是">是</el-radio>
                                        <el-radio label="否">否</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="currentNeedFund">
                            <div class="form-list">
                                <div class="form-title">9、目前贷款资金需求金额？（单位：万元）</div>
                                <div class="form-value">
                                    <el-input v-model.number="information.currentNeedFund" placeholder="请输入内容"></el-input>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="fundFinishMonth">
                            <div class="form-list">
                                <div class="form-title">10、希望贷款资金什么时候到位？</div>
                                <div class="form-value">
                                    <el-select width="10" v-model="information.fundFinishMonth" placeholder="请选择">
                                        <el-option
                                        v-for="item in roleArr"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key">
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="financingGuarantee">
                            <div class="form-list">
                                <div class="form-title">11、如果需要，您愿意接受那些贷款的担保或增信方式？（可多选）</div>
                                <div class="form-value">
                                    <el-checkbox-group v-model="information.financingGuarantee">
                                        <el-checkbox v-for="item in methodArr" :key="item.key" :label="item.value"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="financingUse">
                            <div class="form-list">
                                <div class="form-title">12、融资的主要用途</div>
                                <div class="form-value">
                                    <el-input v-model="information.financingUse" placeholder="请输入内容"></el-input>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item>
                        <div  @click="submitBtn('information')" class="btn">提交</div>                
                        </el-form-item>
                    </el-form>
                </div>
                <div class="info-menu"  v-if="stateStep == 4 || stateStep == 2">
                    <div class="edit-title">为了更好地帮您匹配适合您的贷款产品，请根据企业的情况如实填写如下问题的答案。</div>
                    <div class="menu-item">
                        <div class="menu-list">
                            <div class="name">1、公司所从事的业务(产品和服务）</div>
                            <div class="value">{{info.companyServiceInfo}}</div>
                        </div>
                        <div class="menu-list">
                            <div class="name">2、上一完整年度的营业收入（单位：万元）</div>
                            <div class="value">{{info.lastYearIncome}}</div>
                        </div>
                        <div class="menu-list">
                            <div class="name">3、上一完整年度是否盈利？</div>
                            <div class="value">{{info.isLastYearProfit}}</div>
                        </div>
                        <div class="menu-list">
                            <div class="name">4、今年完整年度预计营业收入（单位：万元）</div>
                            <div class="value">{{info.thisYearPlanIncome}}</div>
                        </div>
                        <div class="menu-list">
                            <div class="name">5、公司的实际控制人户籍所在地？</div>
                            <div class="value">{{info.masterProvinceName+info.masterCityName}}</div>
                        </div>
                        <div class="menu-list">
                            <div class="name">6、今年完整年度预计是否盈利？</div>
                            <div class="value">{{info.isThisYearPlanProfit}}</div>
                        </div>
                        <div class="menu-list">
                            <div class="name">7、目前是否有银行贷款？</div>
                            <div class="value">{{info.isHasBankCash}}</div>
                        </div>
                        <div class="menu-list">
                            <div class="name">8、是否曾经进行过股权融资？</div>
                            <div class="value">{{info.isHadFinancing}}</div>
                        </div>
                        <div class="menu-list">
                            <div class="name">9、目前贷款资金需求金额？（单位：万元）</div>
                            <div class="value">{{info.currentNeedFund}}</div>
                        </div>
                        <div class="menu-list">
                            <div class="name">10、希望贷款资金什么时候到位？</div>
                            <div class="value">{{info.fundFinishMonthDesc}}</div>
                        </div>
                        <div class="menu-list">
                            <div class="name">11、如果需要，您愿意接受那些贷款的担保或增信方式？（可多选）</div>
                            <div class="value">{{info.financingGuaranteeDesc}}</div>
                        </div>
                        <div class="menu-list">
                            <div class="name">12、融资的主要用途</div>
                            <div class="value">{{info.financingUse}}</div>
                        </div>
                    </div>
                    <div @click="refBtn" class="btn">修改答案</div>
                    <div v-show="stateStep == 2" class="edit-title">您的初审认证申请已提交，请耐心等待{{configObj.name}}人员审核。您可先在左侧我的公司菜单中补充完整公司相关信息。</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
import VueRouter from 'vue-router'
let CONSTANT = require('../../../constant/constant.js'),
    common = require('../../../common.js'),
    config = require('../../../config/config.js')
export default {
  name: 'menulist',
  data(){
    var validateNum =  (rule, value, callback) => {
        var reg= /^(-?\d+)(\.\d{1,2})?$/
        if (!reg.test(value)){ return callback(new Error('请保留两位小数')); }
        callback();
    };
    return{
      configObj:'',
      href:'',
      checkList:'是',
      info:'',
      stateStep:1,
      roleArr:[],
      methodArr:[],
      fselectArr:[],
      dataList:[],
      addressArr:[],
      cityArr:[],
      information: {
        companyServiceInfo:'',
        currentNeedFund: '',
        fundFinishMonth: "",
        financingGuarantee: [],
        isHadFinancing: "",
        isHasBankCash: "",
        isLastYearProfit: "",
        isThisYearPlanProfit: '',
        lastYearIncome: '',
        thisYearPlanIncome:'',
        financingUse:'',
        masterProvinceCode :'',
        masterCityCode:''
      },
      rules: {
          companyServiceInfo: [
            { required: true, message: '请输入公司所从事的业务', trigger: 'blur' }
          ],
          lastYearIncome: [
            { required: true, message: '请输入上一完整年度的营业收入', trigger: 'blur' },
            { type: 'number', message: '上一完整年度的营业收入必须为数字值'},
            {  validator: validateNum, trigger: 'blur' }
          ],
          isLastYearProfit: [
            { required: true, message: '请填写上一完整年度是否盈利的答案', trigger: 'blur' }
          ],
          thisYearPlanIncome: [
            { required: true, message: '请输入今年完整年度预计营业收入', trigger: 'blur' },
            { type: 'number', message: '今年完整年度预计营业收入必须为数字值'},
            {  validator: validateNum, trigger: 'blur' }
          ],
          isThisYearPlanProfit: [
            { required: true, message: '请填写今年完整年度预计是否盈利的答案', trigger: 'blur' }
          ],
          isHasBankCash: [
            { required: true, message: '请填写目前是否有银行贷款的答案', trigger: 'blur' }
          ],
          isHadFinancing: [
            { required: true, message: '请填写是否曾经进行过股权融资的答案', trigger: 'blur' }
          ],
          currentNeedFund: [
            { required: true, message: '请输入目前贷款资金需求金额', trigger: 'blur' },
            { type: 'number', message: '目前贷款资金需求金额必须为数字值'},
            {  validator: validateNum, trigger: 'blur' }
          ],
          fundFinishMonth: [
            { required: true, message: '请选择希望贷款资金什么时候到位', trigger: 'blur' }
          ],
          financingGuarantee: [
            { required: true, message: '请选择您愿意接受那些贷款的担保或增信方式', trigger: 'blur' }
          ],
          financingUse: [
            { required: true, message: '请输入融资的主要用途', trigger: 'blur' }
          ],
        }
    }
  },
  components: {
    'menu-top':() => import('../../common/Menu-Top'),
    'menu-left':() => import('../../common/Menu-Left'),
    "rotate-message": () => import("../../common/rotate-message")
  },  
  watch: {  
      'addressArr':function(){
          this.addressArr.map((item)=>{
                if(this.information.masterProvinceCode == item.key){
                    this.cityArr = item.childs
                }
            })
      },
  },
  created() {
        let arr = location.hostname.split('.');
let urlName = arr[0] == 'www'?arr[1]:arr[0];
        this.configObj = config.urlObjs[urlName];
    },
  mounted(){
      this.getDetail()
      this.getArr()
      this.getMethod()
      this.getProductPage()
  },
  methods:{
      returnArrName(arr){
            let arr1 = []
            arr.map( (item, index) => {
                let itemArea = "";
                if (item.financingProvinceName) {
                    itemArea = item.financingProvinceName
                }
                if (item.financingCityName) {
                    itemArea = item.financingProvinceName+item.financingCityName
                }
                if (item.financingDistrictName) {
                    itemArea = item.financingProvinceName+item.financingCityName+item.financingDistrictName
                }
               arr1.push(itemArea)
            })
            return arr1.join(';')
        },
       linkTo(link,id){
            this.$router.push({path: link, query: {id: id}})
       },
       returnBody(data){
            let arr = []
            data.map((item)=>{
                arr.push(item.fundBodyDesc)
            })
            return  arr.length?arr.join(','):'--'
        },
        provinceChange1(e){
            this.information.masterCityCode = ''
            this.cityArr = [];
            this.addressArr.map((item)=>{
                if(e== item.key){
                    this.cityArr = item.childs
                }
            })
        },
        dd(e){
            this.information.masterCityCode = e
        },
        getProvince(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'province'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.addressArr= res.data.bussData
                }else{
                
                }
            })
        },
       getProductPage(){
            let  url = common.getCookie('companyName') !='创巢'
                  ? CONSTANT.URL.WEB.FINDFINANCEBYPAGE
                  : CONSTANT.URL.WEB.FINDPRODUCTBYPAGE,
                data = {},
                dataForm = {
                    pageIndex:1,
                    pageSize:2
                }
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.dataList = res.data.bussData;
                    }else{
                    }
                })
        },
        refBtn(){
            this.stateStep = 1;
        },
      getArr(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'fund_finish_month'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.roleArr= res.data.bussData
                }else{
                
                }
            })
        },
        strReturn(str){
            return str.length?str.join(','):'--'
        },
        submitBtn(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                let url = CONSTANT.URL.SYSTEM.SAVEFINANCINGAUTH;
                let arr = [];
                this.information.financingGuarantee.map((item,index)=>{  
                    this.methodArr.forEach((list)=>{
                        if(item == list.value){
                            arr.push(list.key)
                        }
                    })  
                })
                this.information.financingGuarantee = arr.join(',')
                let param = JSON.stringify(this.information);

                common.requestAjax(url, param, null, res => {
                    if(res.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        });
                        this.getDetail()
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.msg
                        });
                    }
                });
            } else {
                return false;
            }
            });
        },
        getMethod(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'financing_guarantee'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.methodArr= res.data.bussData
                }else{
                
                }
            })
        },
      getDetail(){
            let  url = CONSTANT.URL.SYSTEM.FINDUSERFINANCINGAUTH,
                data = {},
                dataForm = {}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    let obj = {
                        companyServiceInfo:'',
                        currentNeedFund: '',
                        fundFinishMonth: "",
                        financingGuarantee: [],
                        isHadFinancing: "",
                        isHasBankCash: "",
                        isLastYearProfit: "",
                        isThisYearPlanProfit: '',
                        lastYearIncome: '',
                        thisYearPlanIncome:'',
                        financingUse:'',
                        masterProvinceCode :'',
                        masterCityCode:''
                    }
                        this.info = res.data?res.data.bussData:''
                        this.information = res.data.bussData?res.data.bussData: obj;
                     this.information.financingGuarantee =this.information.financingGuarantee.length?this.information.financingGuarantee.split(','):[]
                     let arr = this.information.financingGuarantee,
                        arr1 = [];
                        arr.map((item,index)=>{  
                            this.methodArr.forEach((list)=>{
                                if(item == list.key){
                                    arr1.push(list.value)
                                }
                            })  
                        })
                    if(!this.info){
                        this.stateStep = 1
                    }else{
                        this.information.financingGuarantee = res.data.bussData.financingGuaranteeDesc? res.data.bussData.financingGuaranteeDesc.split(','):'';
                        if(this.info.auditStatus == 'init'){
                            this.stateStep = 2
                        }else if(this.info.auditStatus == 'pass'){
                            this.stateStep = 3
                        }else if(this.info.auditStatus == 'reject'){
                            this.stateStep = 4 
                        }
                    }
                    this.getProvince()
                }else{
                
                }
            })
        },
  }
}
</script>

<style  lang="scss" >
body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.content{
  min-height: 100%;
  background-color: #f5f5f5;
  width: 81.3%;
  float: right;
}

.content-wrap{
  overflow: hidden;
}

.certification-wrap{
  padding-top: 29px;
  .wrap{
    background-color: #f5f5f5;
    .title-head{
      height: 50px;
      line-height: 50px;
      background-color: #fff;
      margin-top: 18px;
      padding-left: 20px;
      font-size: 14px;
      color: #666;
      span{
        color: #0087DC;
        cursor: pointer;
      }
    }
    .el-form-item{
        margin-bottom: 0;
        .el-form-item__content{
            line-height:initial ;
        }
    }
    
    .wrap-container{
      padding: 11px 60px 33px 29px;
      background-color: #fff;
      margin-top: 20px;
      .title{
        padding-bottom: 18px;
        padding-top: 10px;
        // border-bottom: 1px solid #D1D1D1;
        color: #666;
        span{
            color: #111;
        }
        .btn{
            display: inline-block;
            width: 200px;
            height: 40px;
            margin-left: 41px;
            background-color: #8C8C8C;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            font-size: 18px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            &:hover{
                background-color: #777;
                transition:all .2s linear
            } 
        }
      }
      .info-form{
          margin-top: 30px;
         .edit-title{
              position: relative;
              font-size: 16px;
              color: #333;
              font-weight: bold;
              padding-left: 16px;
              margin-bottom: 28px;
              &:after{
                  content: '';
                  position: absolute;
                  left: 0;
                  top: 2px;
                  width: 3px;
                  height: 17px;
                  background-color: #ED7018;
              }
          } 
          .form-value{
              .el-radio-group{
                  padding: 10px 0;
                  .el-radio__label{
                    font-size: 16px;
                     color: #333;
                  }
              }
          }
      }
      .info-edit{
          padding-top: 31px;
          .edit-title{
              position: relative;
              font-size: 16px;
              color: #333;
              font-weight: bold;
              padding-left: 16px;
            //   margin-bottom: 28px;
              &:after{
                  content: '';
                  position: absolute;
                  left: 0;
                  top: 2px;
                  width: 3px;
                  height: 17px;
                  background-color: #ED7018;
              }
          }
          .product-wrap{
            .product-list{
                    margin-top: 30px;
                    overflow: hidden;
                    border-top: 1px solid #E1E1E1;
                    padding-top: 31px;
                    cursor: pointer;
                    &:first-child{
                        border-top: 0px solid #000;
                    }
                    img{
                        float: left;
                        width: 24.167%;
                        height:194px;
                        margin-right: 2.67%;
                    }
                    .btn{
                        position: absolute;
                        right: 0px;
                        top: 90px;
                        width: 100px;
                        height: 40px;
                        background-color: #ED7018;
                        border-radius: 4px;
                        -webkit-border-radius: 4px;
                        font-size: 18px;
                        color: #fff;
                        text-align: center;
                        line-height: 40px;
                        cursor: pointer;
                        &.applyed{
                            background-color: #909399;
                            cursor: inherit;
                            &:hover{
                                background-color: #909399;
                            }
                        }
                        &:hover{
                            background-color: #ED9000;
                            transition:all .2s linear
                        } 
                    }
                    .list-info{
                        position: relative;
                        float: left;
                        overflow: hidden;
                        width: 73%;
                        .date{
                            position: absolute;
                            right: 0;
                            top: 9px;
                            font-size: 14px;
                            color: #999;
                        }
                        .title1{
                            font-size: 18px;
                            color: #111;
                            font-weight: bold;
                            
                        }
                        .list-line{
                            float: left;
                            width:49%;
                            font-size: 16px;
                            color: #111;
                            .line-item{
                                margin-top: 21px;
                            }
                            span{
                                color: #666;
                            }
                            &:last-child{
                                width: 39%;
                            }
                        }
                    }
                }
          }
      }
      .info-form{
          .form-list{
              margin-top: 29px;
              .form-title{
                  font-size: 16px;
                  color: #333;
                  margin-bottom: 20px;
              }
          }
          .btn{
            width: 200px;
            height: 40px;
            background-color: #ED7018;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            font-size: 18px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            margin-top: 60px;
            cursor: pointer;
            &:hover{
                background-color: #777;
                transition:all .2s linear
            } 
        }
          .el-input{
              width: 384px;
              height: 40px;
          }
          .el-select{
              width: 181px;
              .el-input{
                    width: 181px;
                    height: 40px;
                }
          }
          .el-checkbox__label{
              font-size: 16px;
              color: #333;
          }
      }
      .info-menu{
          .edit-title{
              position: relative;
              font-size: 16px;
              color: #333;
              font-weight: bold;
              padding-left: 16px;
              margin-bottom: 28px;
              margin-top: 30px;
              &:after{
                  content: '';
                  position: absolute;
                  left: 0;
                  top: 2px;
                  width: 3px;
                  height: 17px;
                  background-color: #ED7018;
              }
          }
          .menu-item{
              .menu-list{
                  font-size:16px;
                  color: #333;
                  margin-top: 32px;
                  .name{
                      margin-bottom: 31px;
                  }
                  .value{
                      padding-left: 31px;
                  }
              }
          }
          .btn{
            width: 200px;
            height: 40px;
            background-color: #ED7018;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            font-size: 18px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            margin-top: 30px;
            cursor: pointer;
            &:hover{
                background-color: #777;
                transition:all .2s linear
            } 
        }
      }
    }
  }
}

a{
  text-decoration: none;
}
</style>